<template>
    <div class="container">
        <dv-border-box11 class="border-box11">
            <el-bmap :zoom="zoom"
                     :max-zoom="20"
                     :min-zoom="16"
                     :lazy="2000"
                     :tilt="60"
                     default-cursor="default"
                     :enable-keyboard="true"
                     :enable-inertial-dragging="true"
                     :map-style-v2="darkStyle"
                     :center="center"
                     :events="events"
                     :bmap-manager="mapManager"
                     :bounds="bounds"
                     vid="bmap-vue">
                <el-bmap-info-window-custom :is-custom="true"
                                            :visible="infoWindow.visible"
                                            :position="infoWindow.position"
                                            :events="{close: ()=>{infoWindowClose()}}">
                    <template>
                        <span>{{infoWindow.content}}</span>
                    </template>
                </el-bmap-info-window-custom>
                <el-bmapv-view>
                    <el-bmapv-icon-layer :visible="visibleTeam"
                                         :icon="require('../assets/marker.png')"
                                         :width="50"
                                         :height="77"
                                         :scale="0.5"
                                         :offset="[0, - 153 / 2 / 2]"
                                         :data="firePoint"
                                         :enable-picked="true"
                                         :auto-select="true"
                                         :on-click="onClickTeamIconLayer"/>
                </el-bmapv-view>
            </el-bmap>
            <div class="left menu">
                <div :class="['menu-item',{'active':visibleTeam}]" @click="visibleTeam = !visibleTeam">
                    <dv-border-box10>
                        显示位置
                    </dv-border-box10>
                </div>
            </div>
        </dv-border-box11>

    </div>
</template>
<script>

    import { BMapManager } from 'vue-bmap-gl';
    import BD from "../assets/baidu"
    export default {
        name: "Baidu",
        data(){
            return {
                zoom:17,
                bounds:[],
                center:[116.47352072900014, 39.99],
                color:'#003B51',
                darkStyle:{styleJson:BD.style1},
                mapManager:new BMapManager(),
                map: null,
                data:[],
                infoWindow:{
                  visible:false,
                  position:[116.47352072900014, 39.99],
                  content:'哈哈哈'
                },
                events:{
                    init:(e)=>{
                        this.map = e;
                        e.setDisplayOptions({
                            indoor: false,
                            poi: true,
                            skyColors: [
                                'rgba(5, 5, 30, 0.01)',
                                'rgba(5, 5, 30, 1.0)'
                            ]
                        });
                    }
                },
                visibleTeam:false,
                firePoint:[
                    {
                        geometry: {
                            type: 'Point',
                            coordinates: [116.47352072900014, 39.99]
                        },
                    }
                ]
            }
        },


        mounted() {
        },
        methods:{
            infoWindowClose(e){
                console.log("关闭",e);
                this.infoWindow.visible = false;
            },
            onClickTeamIconLayer(obj){
                console.log("点击icon");

                let coordinates = obj.dataItem.geometry.coordinates;

                console.log(coordinates);
                this.infoWindow.visible = true;
                this.infoWindow.position = [coordinates[0], coordinates[1]];

              },
        },
    }
</script>

<style scoped lang="less">
    .container {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        overflow: hidden;
        transform-origin: left top;
        background: #282c34;

        .border-box11{
            box-sizing: border-box;
            overflow: hidden;
            padding: 60px 10px 10px;

            /deep/ .dv-border-svg-container{
                z-index: 1;
            }
            .menu{
                z-index: 10;
                position: absolute;
                top: 0;
                width: 220px;
                height: 100%;
                color: white;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .menu-item{
                    height: 60px;
                    cursor: pointer;
                    transition: .2s background-color;
                    margin: 10px;
                    &/deep/.border-box-content{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    &.active{
                        background: rgb(29, 72, 196);
                    }
                    &:hover{
                        background: rgb(29, 72, 196);
                    }
                }
                &.left{
                    left: 0;
                }
                &.right{
                    right: 0;
                }
            }
        }
    }
</style>
